<template>
	<div class="new-vedio">
		<div class="nav-head"><router-link to="/vedio"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">最新视频</div></div>
		<div class="new-tabs">
			<div :class="{'new-active':showShortVedio}" @click="ToShortVedio"><span>短视频</span></div>
			<div :class="{'new-active':showMV}" @click="ToMV"><span>MV</span></div>
		</div>
		<div class="top-blank"></div>
		<div class="new-list">
			<div class="vedio-list">
				<div class="vedio-box">
					<img src="../../../../assets/wuyifan.png" class="singer">
					<img src="../../../../assets/icon-stop60.png" class="stop">
					<p>音乐如此让你飞动不起来</p>
				</div>
				<div class="vedio-box mr0">
					<img src="../../../../assets/wuyifan.png" class="singer">
					<img src="../../../../assets/icon-stop60.png" class="stop">
					<p>音乐如此让你飞动不起来</p>
				</div>
				<div class="vedio-box">
					<img src="../../../../assets/wuyifan.png" class="singer">
					<img src="../../../../assets/icon-stop60.png" class="stop">
					<p>音乐如此让你飞动不起来</p>
				</div>
				<div class="vedio-box mr0">
					<img src="../../../../assets/wuyifan.png" class="singer">
					<img src="../../../../assets/icon-stop60.png" class="stop">
					<p>音乐如此让你飞动不起来</p>
				</div>
				<div class="vedio-box">
					<img src="../../../../assets/wuyifan.png" class="singer">
					<img src="../../../../assets/icon-stop60.png" class="stop">
					<p>音乐如此让你飞动不起来</p>
				</div>
				<div class="vedio-box mr0">
					<img src="../../../../assets/wuyifan.png" class="singer">
					<img src="../../../../assets/icon-stop60.png" class="stop">
					<p>音乐如此让你飞动不起来</p>
				</div>
				<div class="vedio-box">
					<img src="../../../../assets/wuyifan.png" class="singer">
					<img src="../../../../assets/icon-stop60.png" class="stop">
					<p>音乐如此让你飞动不起来</p>
				</div>
				<div class="vedio-box mr0">
					<img src="../../../../assets/wuyifan.png" class="singer">
					<img src="../../../../assets/icon-stop60.png" class="stop">
					<p>音乐如此让你飞动不起来</p>
				</div>
				<div class="vedio-box">
					<img src="../../../../assets/wuyifan.png" class="singer">
					<img src="../../../../assets/icon-stop60.png" class="stop">
					<p>音乐如此让你飞动不起来</p>
				</div>
				<div class="vedio-box mr0">
					<img src="../../../../assets/wuyifan.png" class="singer">
					<img src="../../../../assets/icon-stop60.png" class="stop">
					<p>音乐如此让你飞动不起来</p>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../../components/music_player'
	export default{
		name:"newVedio",
		data(){
			return{
				showShortVedio:true,
				showMV:false
			}
		},
		components:{
			musicPlayer
		},
		methods:{
			ToShortVedio(){
				this.showShortVedio=true;
				this.showMV = false
			},
			ToMV(){
				this.showShortVedio=false;
				this.showMV = true
			}
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 168 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.new-tabs{
		position: fixed;
		top:88 / 100rem;
		left: 0;
		text-align: center;
		width: 100%;
		background-color: #fff;
		z-index: 999;
		div{
			width: 50%;
			float: left;
			border-bottom: 4px solid #fff;
			span{
				display: block;
				margin-top: 32 / 100rem;
				margin-bottom: 10 / 100rem;
				font-size: 30 / 100rem;
			}
		}
		.new-active{
			border-bottom: 4px solid #c995f5;
			color: #c995f5;
		}
	}
.new-list{
	// margin-top: 198 / 100rem;
	// margin-bottom: 108 / 100rem;
	padding-top: 27 / 100rem;
	.vedio-list{
		overflow: hidden;
		.vedio-box{
			float: left;
			width: 370 / 100rem;
			margin-right: 10 / 100rem;
			position: relative;
			.singer{
				width: 100%;
			}
			.stop{
				position: absolute;
				width: 60 / 100rem;
				right: 10 / 100rem;
				bottom: 75 / 100rem;
			}
			p{
				font-size: 24 / 100rem;
				padding-top: 15 / 100rem;
				margin-left: 10 / 100rem;
				padding-bottom: 21 / 100rem;
			}
		}
		.mr0{
			margin-right: 0;
		}
	}
}
</style>